<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>P186 【案例】缓动的小球</title>
    <style>
        #box {
            position: absolute;
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
            background: blue;
            color: #fff;
            border-radius: 60px;
        }
    </style>
</head>

<body>
    <div id="box">点我啊，跑！</div>
    <script>
        var obj = document.getElementById('box');
        obj.onclick = function () {
            animate(obj, { 'left': 200, 'top': 50 });
        };
        function animate(obj, option) {
            clearInterval(obj, timer);
            obj.timer = setInterval(function () {
                var flag = true;
                for (var k in option) {
                    var leader = parseInt(getStyle(obj, k)) || 0;
                    var target = option[k];
                    var step = (target - leader) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    obj.style[k] = leader + 'px';
                    if (leader != target) {
                        flag = false;
                    }
                }
                if (flag) {
                    clearInterval(obj.timer);
                }
            }, 15);
        }
        function getStyle(obj, sttr) {
            if (window.getComputedStyle) {
                return window.getComputedStyle(obj, null)[attr];
            } else {
                return obj.currentStyle[attr];
            }
        }
    </script>
    <a href="../首页/page08.html">
        <h2>返回上一页面</h2>
    </a>
</body>

</html>